<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*,util.*,dal.*,model.*, bll.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
int idChecklist = MiscUtil.getIntUrlParam(request, "idChecklist");
int idParent = MiscUtil.getIntUrlParam(request, "idParent");

ChecklistModel checklist = CacheUtil.getChecklist(idChecklist);
String checklistName = checklist.getName();
String checklistUrl = "checklist.jsp?id=" + idChecklist;

String projectName = CacheUtil.getProjectName(checklist.getIdProject());
String projectUrl = "project.jsp?id=" + checklist.getIdProject();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Create New Checklist Item</title>

<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/inputForm.css" />
<link rel="stylesheet" href="css/listForm.css" />
<link rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="css/hyjack.css" type="text/css" />
<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="css/themes/ui-lightness/jquery.ui.all.css" />
<link rel="stylesheet" href="css/jquery-ui-timepicker.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-datepicker.css" />
<link rel="stylesheet" href="css/jquery-dialog.css" />

<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.select.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.timepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.js"></script> 
<script language="javascript" type="text/javascript" src="js/ajaxQuickInsert.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.numeric.js"></script>
<script language="javascript" type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.tools.min.js"></script>

<script language="javascript" type="text/javascript">
	$(document).ready(pageLoaded);
	function pageLoaded()
	{
		turnOnNumbericInput();
		initDateTimePicker();
		initTooltip();
	} 
	
	var requiredInputs = [['name','name_required']];
	var requiredIsGroupInputs = [['start_time_date','start_time_date_required'],['end_time_date','end_time_date_required']];
/*	var intInputs = [];
	var doubleInputs = [];
	var dateInputs = [];*/
	var timeInputs = [['start_time_date', 'start_time_date_invalid'],['end_time_date', 'end_time_date_invalid']];

	function checkInputs() {
		var valid = true;

		if (checkRequiredInputs(requiredInputs) == false) {
			valid = false;
		}
		if (checkRequiredIsGroupInputs(requiredIsGroupInputs,'is_group') == false) {
			valid = false;
		}
	/*	if (checkIntInputs(intInputs) == false) {
			valid = false;
		}
		if (checkDoubleInputs(doubleInputs) == false) {
			valid = false;
		}
		if (checkDateInputs(dateInputs) == false) {
			valid = false;
		}*/
		if (!isIsGroup() && (checkTimeInputsForCorrectFormatOnly(timeInputs) == false)) {
			valid = false;
		}

		// SPECIFIC VALIDATE CODE HERE		

		return valid;
	}
	function isIsGroup()
	{
		if(document.getElementById("is_group").checked == true)
			return true;
		else
			return false;
	}
</script>
</head>
<body>
	<div class="divContainer">
		<%@ include file="menu.jsp"%>
				<form id="inputForm" action="checklistItem?mode=insert&id_checklist=<%=idChecklist %>" method="post" onSubmit="return checkInputs()" onreset="return confirm('Do you really want to reset the form?')">
					<table class="tblInput">
						<tr><td colspan="1">
							<b>Project: <a id="link_project" name="link_project" href="<%=projectUrl %>"><%=projectName %></a></b>
							<br />&gt;
							<b>Checklist: <a id="link_checklist" name="link_checklist" href="<%=checklistUrl %>"><%=checklistName %></a></b>
						</td></tr>
						<tr>
							<td  class="inputHeader">Create New Checklist Item</td>
						</tr>
						<tr>
					<td style="padding-left: 400px; padding-right: 400px;">
						<table cellspacing="0px">
						<tr class="trField">
							<td class="tdFieldName">Phase</td> 
							<td class="tdFieldInput">
								<select id="id_phase" name="id_phase" class="hyjack" title="Choose phase this checklist item belongs to.">
									<%=HtmlUtil.<PhaseModel>genModelSelect(CacheUtil.getPhaseList(checklist.getIdProject()),null)%>
								</select>
							</td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField">
							<td class="tdFieldName">Parent</td>
							<td class="tdFieldInput">
								<select id="id_parent" name="id_parent" class="hyjack" title="Choose parent checklist item for this checklist item">
									<%=HtmlUtil.genModelSelect(CacheUtil.getIsGroupChecklistItemList(idChecklist), null, idParent, false, true)%>
								</select>
							</td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField">
							<td class="tdFieldName">Display Index</td>
							<td class="tdFieldInput">
								<input class="inputText" type="text" id="display_index" name="display_index" maxlength="10" title="Display index of new checklist item." /></td>
							<td class="tdErrMsg">
							</td>
						</tr>
						<tr class="trField">
							<td class="tdFieldName">Name</td>
							<td class="tdFieldInput"><input class="inputText" type="text" id="name" name="name" maxlength="255" title="Name of new checklist item. Note: Required." onblur="validateRequiredInput('name');"/></td>
							<td class="tdErrMsg">
								<span id="name_required" class="errMsg" style="display: none;" title="Name is required">(!)</span> 
							</td>
						</tr>
						<tr class="trField">
							<td class="tdFieldName">Remark</td>
							<td class="tdFieldInput"><textarea id="remark" name="remark"
									rows="5" class="inputTextarea" title="Remark of new checklist item"></textarea></td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField">
							<td class="tdFieldName">Is Group</td>
							<td class="tdFieldInput">
								<table class="tblBool">
									<tr class="trBoolSet">
										<td colspan="2" class="tdBoolSet"><input type="checkbox" id="is_group" class="inputCheckbox" name="is_group" onchange="toggleControls(['row_id_employee', 'row_id_company', 'row_start_time_date', 'row_end_time_date', 'row_man_day', 'row_status']);" title="Check if this is group of others" />
										</td>
										<td><span class="textGuide">(If this is group of others)</span></td>
									</tr>
								</table>
							</td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField" id="row_id_employee">
							<td class="tdFieldName">Employee</td>
							<td class="tdFieldInput">
								<select id="id_employee" name="id_employee" class="hyjack" title="Choose an employee for this checklist item">
									<%=HtmlUtil.genModelSelect(CacheUtil.getEmployeeList(), null,Integer.MIN_VALUE,false,true)%>
								</select>
								<input class="btnAdd" type="button" id="addNewEmployee" value="" onclick="ajaxAddItem('#id_employee', 'employee', 'name', 'Please enter new employee name!');" title="Click here to add new employee" />
							</td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField" id="row_id_company">
							<td class="tdFieldName">Company</td>
							<td class="tdFieldInput">
								<select id="id_company" name="id_company" class="hyjack" title="Choose a company for this checklist item">
									<%=HtmlUtil.<CompanyModel>genModelSelect(CacheUtil.getCompanyList(), null,Integer.MIN_VALUE,false,true)%>
								</select>
								<input class="btnAdd" type="button" id="addNewCompany" value="" onclick="ajaxAddItem('#id_company', 'company', 'short_name', 'Please enter new company name!');" title="Click here to add new company" />
							</td>
							<td class="tdErrMsg"></td>
						</tr>
						<tr class="trField" id="row_start_time_date">
							<td class="tdFieldName">Start Time</td>
							<td class="tdFieldInput">
								<input type="text" maxlength="19" class="inputDateTime" id="start_time_date" name="start_time_date" title="Click here to choose start time<br/>Note: The format is <b>dd/mm/yyyy at hh:mm</b>" onblur="validateRequiredInput('start_time_date',true);" onchange="validateDateTimeInput('start_time_date', true);"/>
								<span class="textGuide">('date' at 'time')</span>
							</td>
							<td class="tdErrMsg">
								<span id="start_time_date_required" class="errMsg" style="display: none;" title="Start Time is required">(!)</span>
								<span id="start_time_date_invalid" class="errMsg" style="display: none;" title="You've entered an invalid time.<br/>The format should be <b> 'dd/mm/yyyy at hh/mm'</b>">(!)</span>
							</td>
						</tr>
						<tr class="trField" id="row_end_time_date">
							<td class="tdFieldName">End Time</td>
							<td class="tdFieldInput">
							 	<input type="text" maxlength="19" class="inputDateTime" id="end_time_date" name="end_time_date" title="Click here to choose end time<br/>Note: The format is <b>dd/mm/yyyy at hh:mm</b>" onblur="validateRequiredInput('end_time_date',true);" onchange="validateDateTimeInput('end_time_date', true);"/>
							 	<span class="textGuide">('date' at 'time')</span>
							</td>
							<td class="tdErrMsg">
								<span id="end_time_date_required" class="errMsg" style="display: none;" title="End Time is required">(!)</span>
								<span id="end_time_date_invalid" class="errMsg" style="display: none;" title="You've entered an invalid time.<br/>The format should be <b> 'dd/mm/yyyy at hh/mm'</b>">(!)</span>
							</td>
						</tr>
						<tr class="trField" id="row_man_day">
							<td class="tdFieldName">Man Day</td>
							<td class="tdFieldInput">
								<input class="inputNumeric" type="text" id="man_day" name="man_day" title="Man day of the checklist item. <br/>Note: numeric only." maxlength="20" />
							</td>
							<td class="tdErrMsg">
							</td>
						</tr>
						<tr class="trField" id="row_status">
							<td class="tdFieldName">Status</td>
							<td class="tdFieldInput">
								<select id="status" name="status" class="hyjack" title="Choose one status for this checklist item.">
									<%=HtmlUtil.genEnumSelect(EnumName.ChecklistItemStatus, null)%>
								</select>
								<span class="textGuide"></span>
							</td>
							<td class="tdErrMsg">
							</td>
						</tr>
						<tr class="trInputBottom">
						<td class="tdFieldName"></td>
						<td class="tdSubmit">
							<div class="divButtonSubmit" >
								<input class="btnSubmit" type="submit" value="Submit" title="Click to save above information." />
							</div>
							<div class="divButtonReset">
								<input class="btnReset" type="reset" value="Reset" title="Click to reset all above fields." />
							</div>
							<div style="clear: both;">
							</div>
						</td>
									
					</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
				<%
					String urlChecklistItemList = "checklist.jsp?embedded=true";
					if(idChecklist != 0)
						urlChecklistItemList += "&id="+idChecklist;
				%>
				<center><jsp:include page='<%=urlChecklistItemList%>'></jsp:include></center>	
			</div>
</body>
</html>